<!-- <script lang="ts" setup>
import type { DataResource, ClusterMetricsFetchData } from '@/types/cluster';

// 定义响应式数据
let intervalId: ReturnType<typeof setInterval>;

const dataResources = ref<DataResource[]>([]);
const selectedCluster = ref('全部集群');
const clusterFlag = computed(() => {
  switch (selectedCluster.value) {
    case '全部集群':
      return 0;
    case '云集群':
      return 1;
    case '边集群':
      return 2;
    case '端设备':
      return 3;
    default:
      return 0;
  }
});

const { data, execute } = await useFetch<ClusterMetricsFetchData>(
  `/api/v1/cluster/metrics`,
  {
    params: { type: clusterFlag } // 动态传递 type 参数
  }
);

const cpuUsage = computed(() => {
  if (data.value === null) {
    return { value: 8, maxValue: 12 };
  }

  return {
    value: data.value.data.cpu_used,
    maxValue: data.value.data.cpu_total
  };
});

const memoryUsage = computed(() => {
  if (data.value === null) {
    return { value: 4858, maxValue: 8176 };
  }

  return {
    value: data.value.data.memory_used,
    maxValue: data.value.data.memory_total
  };
});

const gpuUsage = computed(() => {
  if (data.value === null) {
    return { value: 1, maxValue: 4 };
  }
  return {
    value: data.value.data.gpu_used,
    maxValue: data.value.data.gpu_total
  };
});

const diskUsage = computed(() => {
  if (data.value === null) {
    return { value: 3494, maxValue: 10405 };
  }
  return {
    value: data.value.data.storage_used,
    maxValue: data.value.data.storage_total
  };
});

watchEffect(() => {
  if (data.value === null) {
    dataResources.value = [];
    return;
  }

  dataResources.value = data.value.data.clusters.map((cluster: any) => ({
    name: cluster.name,
    cputotal: cluster.cpu_total,
    cpuuse: cluster.cpu_used,
    gpuuse: cluster.gpu_used,
    gputotal: cluster.gpu_total,
    diskuse: cluster.storage_used,
    disktotal: cluster.storage_total,
    memuse: cluster.memory_used,
    memtotal: cluster.memory_total,
    task: cluster.task_num,
    id: cluster.id,
    status: cluster.health_status,
    cluster_type: cluster.cluster_type,
    cluster_region: cluster.cluster_region
  }));
});

onMounted(() => {
  execute();

  intervalId = setInterval(() => {
    execute();
  }, 5000); // 每5秒检查一次
});

onBeforeUnmount(() => {
  clearInterval(intervalId);
});
</script>

<template>
  <v-container>
    <v-row align="center" justify="start">
      <v-col cols="auto">
        <v-select
          v-model="selectedCluster"
          :items="['全部集群', '云集群', '边集群', '端设备']"
          variant="solo-inverted"
          density="default"
          style="font-weight: bold; color: black"
          placeholder="全部集群"
          width="300"
          label="当前视角"
        />
      </v-col>
    </v-row>

    <v-row class="pb-5">
      <v-col cols="3">
        <v-card>
          <Bar
            central-label="CPU使用率"
            :central-sub-label="`${cpuUsage.value}/${cpuUsage.maxValue}`"
            :used="cpuUsage.value"
            :remaining="cpuUsage.maxValue - cpuUsage.value"
            :colors="['dodgerblue', 'lightgrey']"
          />
        </v-card>
      </v-col>

      <v-col cols="3">
        <v-card>
          <Bar
            central-label="GPU使用率"
            :used="gpuUsage.value"
            :remaining="gpuUsage.maxValue - gpuUsage.value"
            :central-sub-label="`${gpuUsage.value}/${gpuUsage.maxValue}`"
            :colors="['orange', 'lightgrey']"
          />
        </v-card>
      </v-col>

      <v-col cols="3">
        <v-card>
          <Bar
            central-label="内存使用率"
            :central-sub-label="`${memoryUsage.value}/${memoryUsage.maxValue}`"
            :used="memoryUsage.value"
            :remaining="memoryUsage.maxValue - memoryUsage.value"
            :colors="['green', 'lightgrey']"
          />
        </v-card>
      </v-col>

      <v-col cols="3">
        <v-card>
          <Bar
            central-label="硬盘使用率"
            :used="diskUsage.value"
            :remaining="diskUsage.maxValue - diskUsage.value"
            :central-sub-label="`${diskUsage.value}/${diskUsage.maxValue}`"
            :colors="['blue', 'lightgrey']"
          />
        </v-card>
      </v-col>
    </v-row>

    <v-row justify="center">
      <v-col class="d-flex justify-start">
        <v-label class="text-h5" style="font-weight: bold; color: black">
          总视图
        </v-label>
      </v-col>
    </v-row>

    <v-row class="mb-4" variant="text">
      <SchedulerList :flag="0" :dataresources="dataResources" />
    </v-row>
  </v-container>
</template> -->

<script setup lang="ts"></script>

<template>
  <div>
    <!-- place a public image filename is network.png set height to 100% -->

    <img src="/public/clouds.png" class="h-800">
  </div>
</template>
